<template>
  <div id="asset" style="height: 100%; width: 100%;" />
</template>
<script>
import echarts from 'echarts'
// import { getChartsData } from '@/api/basic-setting/dashboard/dashboard'
import { resCurve } from '../data.js'

export default {
  name: 'Curve',
  data() {
    return {
      chart: null,
      resCurve: resCurve,
      dataChart: [],
      xData: [],
      yData: [],
      payData: []
    }
  },
  computed: {
  },
  created() {

  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      if (this.resCurve.code === 20000) {
        this.dataChart = this.resCurve.data
        this.xData = []
        this.yData = []
        this.resCurve.data.forEach(item => {
          this.xData.push(item.bytperiod)
          this.yData.push(item.outamount)
          this.payData.push(item.payamount)
        })
        this.initChart()
      }
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('asset'))
      this.chart.setOption({
        title: {
          text: ''
        },
        grid: {
          top: '50px',
          left: '60px',
          right: '20px',
          bottom: '50px'
        },
        color: ['#7EE5E5', '#F77EB9'],
        legend: {
          icon: 'roundRect',
          data: ['支出金额', '出纳付款']
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            rotate: 45, // 倾斜度 -90 至 90 默认为0
            textStyle: {
              color: '#333333',
              fontSize: '12'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#dddddd'
            }
          },
          data: this.xData
          // data: ['1']
        },
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#f5f5f5'],
                width: 1,
                type: 'solid'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#dddddd'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#333333',
                fontSize: '12'
              }
            }
          }
        ],
        series: [{
          name: '支出金额',
          type: 'line',
          smooth: true,
          data: this.yData,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#7EE5E5'
              }
            }
          },
          areaStyle: {
            // color: ['rgba(126,229,229,0.5)'],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0, color: 'rgba(126,229,229,1)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(126,229,229,.3)' // 100% 处的颜色
              }
            ])
          }
        },
        {
          name: '出纳付款',
          type: 'line',
          smooth: true,
          data: this.payData,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#F77EB9'
              }
            }
          },
          areaStyle: {
            // color: ['rgba(247,126,185,0.5)'],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0, color: 'rgba(247,126,185,1)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(247,126,185,0.3)' // 100% 处的颜色
              }
            ])
          }
        }]
      })
    }
  }
}
</script>
